<template>
  <div>
    <van-pull-refresh v-model="pullDownLoading" @refresh="onRefresh">
      <header class="header">这是头部</header>
      <div class="home-wrap">
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="banner in banners" :key="banner.id">
            <img :src="banner.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
        <!-- /轮播 -->
        <!-- 宫格导航 -->
        <van-grid clickable>
          <van-grid-item
            v-for="cate in cates"
            :key="cate.id"
            :icon="cate.icon"
            :to="{ path: '/itemLists', query: { cateId: cate.id } }"
            :text="cate.name"
          />
        </van-grid>
        <!-- /宫格导航 -->
        <!-- 推荐商品列表 -->
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :immediate-check="false"
          finished-text="我也是有底线的"
          @load="onLoad"
        >
          <Items :items="items" @clickItem="enterDetail" @clickAddIcon="addCart" />
        </van-list>
        <!-- /推荐商品列表 -->
      </div>
      <Tabbar />
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts" name="HomePage">
import { ref, onMounted } from "vue";
import Tabbar from "@/components/Tabbar.vue";
import Items from "./components/Items.vue";
import { fetchHomeBanner, fetchCates, fetchItems, addItemToCart } from "@a/index";
import { useRouter } from "vue-router";
import { showSuccessToast } from "vant";
const router = useRouter();

// 点击加入购物车图标 加入购物车
const addCart = (id: number) => {
  addItemToCart({
    goodsId: id,
    number: 1,
  }).then((res) => {
    if (res.data.code === 0) {
      showSuccessToast({
        message: "加入购物车成功",
      });
    }
  });
};

// 点击商品进入详情
const enterDetail = (id: number) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};

// 首页轮播数据处理
const banners = ref<{ id: number; picUrl: string }[]>([]);
const getHomeBanner = () => {
  fetchHomeBanner().then((res) => {
    if (res.data.code === 0) {
      banners.value = res.data.data;
    }
  });
};
// 首页轮播数据处理
// 宫格导航数据
const cates = ref<{ id: number; name: string; icon: string }[]>([]);
const getCates = () => {
  fetchCates().then((res) => {
    if (res.data.code === 0) {
      cates.value = res.data.data;
    }
  });
};
// 宫格导航数据
// 首页下拉刷新
const pullDownLoading = ref<boolean>(false);
// 下拉事件
const onRefresh = () => {
  // 重新请求列表数据
  page.value = 1;
  items.value = [];
  finished.value = false;
  getItems();
};
// 首页下拉刷新结束
// 商品列表的上拉加载

const loading = ref<boolean>(false); // 触底加载中的状态
const finished = ref<boolean>(false); // 是否已经没有数据
const onLoad = () => {
  // 上啦触底
  console.log("已经触底");
  page.value++;

  // 重新请求数据
  getItems();
};
// 商品列表上拉加载结束
// 商品列表开始
const page = ref<number>(1);
const pageSize = ref<number>(5);
const items = ref<{ id: number; name: string; minPrice: number; pic: string }[]>([]);
const getItems = () => {
  fetchItems({
    page: page.value,
    pageSize: pageSize.value,
    categoryId: 72399,
  }).then((res) => {
    // 关闭loading状态 否则 无法加载下一页了
    loading.value = false;
    // 关闭下拉状态
    pullDownLoading.value = false;
    if (res.data.code === 0) {
      items.value = [...items.value, ...res.data.data.result];
    }
    if (res.data.code === 700) {
      // 已经到达最后一页没有数据
      finished.value = true;
    }
  });
};
// 商品列表结束
onMounted(() => {
  getHomeBanner();
  getCates();
  getItems();
});
</script>

<style lang="scss" scoped>
.header {
  height: 40px;
  background-color: #0ed397;
  width: 100%;
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}

.home-wrap {
  padding-top: 40px;
  padding-bottom: 50px;

  .my-swipe {
    width: 10rem;
    height: 5rem;

    img {
      width: 10rem;
      height: 5rem;
    }
  }
}
</style>
